<template>
<div id="app-content">
  <el-container>
    <el-container>
      <el-aside style="width:auto">
        <div class="logo-box">
          <div class="logo fl" style="background:url('/images/logo.png') no-repeat;background-size: 100% 100%;"/>
          <span class="fl logo-text" v-if="!isCollapse">系统名称</span>
        </div>
        <leftmenu ref="leftMenu" :menuOptions="menuData"/>
      </el-aside>
      <el-main id="content">
          <div class="top-header">
            <div class="collapse-box" @click="toogleMenu()">
              <i class="el-icon-s-unfold" v-if="isCollapse"></i>
              <i class="el-icon-s-fold" v-else></i>
            </div>
            <div class="user-box">
              <span class="userImg" style="background:url('/images/userIcon.png') no-repeat;background-size: 100% 100%;"></span>
              <el-dropdown class="fl" @command="handleCommand">
                <span class="el-dropdown-link">
                  <span>{{userInfo.nickname}}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item command="a">个人资料</el-dropdown-item>
                  <el-dropdown-item command="b">修改密码</el-dropdown-item>
                  <!-- <el-dropdown-item command="c">登出</el-dropdown-item> -->
                  <el-dropdown-item divided command="c">登出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
          </div>
          <div class="mid-content">
            <router-view/>
          </div>
      </el-main>
    </el-container>
  </el-container>
  <modal :modalData="modalData" :dialogVisible="dialogVisible" @watchModal="clickMoadl">

    <template slot="main" slot-scope="props">
      <el-form :model="props.data">

        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item :label="props.data.password_label" label-width="100px">
              <el-input v-model="props.data.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="props.data.confirm_label" label-width="100px">
              <el-input v-model="props.data.confirm" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </modal>
</div>
</template>

<script>
import leftmenu from '@/components/slider'
import modal from '@/components/modal'
export default {
  name: 'App',
  data() {
    return {
      menuData:[],
      activeMenu:"",
      breadTitle:"",
      dialogVisible: false,
      isCollapse:false,
      value: '',
      modalData: {
        title: "修改密码",
        content: {
          password_label: '输入密码',
          password: '',
          confirm_label: '确认密码',
          confirm: '',
        },
        footerText: [{
            text: "取消",
            type: "A",
            btnType: ""
          },
          {
            text: "保存",
            type: "B",
            btnType: "primary"
          }
        ]
      },
      userInfo:{
        nickname:"Admin",
      }
    }
  },
  components: {
    'leftmenu': leftmenu,
    'modal': modal
  },
  computed: {
  },
  created(){
    this.getUserMenu()
  },
  mounted() {},
  methods: {
    toogleMenu(){
      if(this.$refs.leftMenu){
        this.$refs.leftMenu.isCollapse=!this.$refs.leftMenu.isCollapse
        this.isCollapse=this.$refs.leftMenu.isCollapse
      }
    },
    clickMoadl(v) {
      if (v.type === 'B') {
        this.changePassword()
      } else {
        this.dialogVisible = false
      }
    },
    changePassword(){
      if(this.modalData.content.password===''){
        this.$message.error("请输入密码")
        return
      }
      if(this.modalData.content.confirm===''){
        this.$message.error("请输入确认密码")
        return
      }

      if(this.modalData.content.password===this.modalData.content.confirm){
        let params={
          id:this.userInfo.id,
          password:this.modalData.content.password
        }
        this.$http.put('/user/manage/updatePassword', params).then((res) => {
          if (res.data.code === 200) {

            if(res.data.content===1){
              this.$message.success("修改密码成功")
            }else{
              this.$message.error("修改密码失败")
            }
            this.dialogVisible = false
          }
        })
      }else{
        this.$message.error("密码不一致")
      }
    },
    getUserMenu(){
      this.$http.get('/json/getUserMenu.json', {}).then(res => {
        // this.$http.post('/user/getCurrentUser', {}).then(res => {
        const menuData=res.data.data
        this.menuData=menuData
        if(sessionStorage.getItem('menuActive')){
          let menuActive=JSON.parse(sessionStorage.getItem('menuActive'))
          let breadTitle=sessionStorage.getItem('breadTitle')&&JSON.parse(sessionStorage.getItem('breadTitle'))
          this.activeMenu=menuActive
          this.breadTitle=breadTitle
        }else{
          this.activeMenu='/home'
          this.breadTitle='首页'
          this.$router.push('/home')
          sessionStorage.setItem('menuActive',JSON.stringify(this.activeMenu))
          sessionStorage.setItem('breadTitle',JSON.stringify(this.breadTitle))
        }
        this.$store.dispatch("setBreadTitle", this.breadTitle);
        this.$store.dispatch("setMenuActive", this.activeMenu);
      }).catch(error => {
        // console.log("error");
      })
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed
      this.$refs.leftMenu.closeAll()
    },
    handleCommand(command) {
      // console.log(command);
      if(command==='c'){
        // window.location.href='/login'
        window.location.href='/'
      }else if(command==='b'){
        // this.dialogVisible = true
      }
    }
  },
}
</script>
<style lang="less" scoped>
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #2b2b2b;
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  position: relative;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


/* 消息提示样式 */
.msg-box{
  li{
    height:40px;
    line-height:40px;
    color:#333;
    font-size:14px;
    border-bottom:1px solid #E4E7ED;
    width:100%;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    cursor:pointer;
  }
  .system-color{
    color:#333 !important;
  }
  .warn-color{
    color:#F52032 !important;
  }
}
.msg-number{
  width:18px;
  height:18px;
  border-radius:9px;
  background:red;
  line-height:18px;
  text-align:center;
  position:absolute;
  top: 19px;
  left: 12px;
  font-size:12px;
  color:#fff;
}
</style>
